<template>
  <div>
    <quill-editor
        class="ql-editor"
        v-model="content"
        ref="myQuillEditor"
        :options="editorOption"
        @blur="onEditorBlur($event)"
        @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
    </quill-editor>
  </div>
</template>

<script>
/* eslint-disable */
import {quillEditor, Quill} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

const fonts = [false, "SimHei", "Microsoft-YaHei", "KaiTi", "FangSong", "Arial", "Times-New-Roman"];
const sizes = ['16px', '18px', false, '24px', '26px', '28px', '30px', '32px', '34px', '36px', '38px', '40px']
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
  ['blockquote', 'code-block'], // 引用  代码块
  [{header: 1}, {header: 2}], // 1、2 级标题
  [{list: 'ordered'}, {list: 'bullet'}], // 有序、无序列表
  [{script: 'sub'}, {script: 'super'}], // 上标/下标
  [{indent: '-1'}, {indent: '+1'}], // 缩进
  [{'direction': 'rtl'}],                         // 文本方向
  [{align: []}], // 对齐方式
  [{font: fonts}], // 字体种类
  [{size: sizes}], // 字体大小
  [{color: []}],// 字体颜色
  [{background: []}],// 字体背景颜色
  [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
  ['clean'], // 清除文本格式
  ['link', 'image', 'video', 'formula'] // 链接、图片、视频
]
const titleConfig = {
  'ql-bold': '加粗', 'ql-italic': '斜体', 'ql-underline': '下划线',
  'ql-blockquote': '块引用', 'ql-code-block': '插入代码',
  'ql-header': '段落格式',
  'ql-list': '列表',
  'ql-strike': '删除线',
  'ql-script': '上标/下标',
  'ql-indent': '缩进',
  'ql-direction': '文本方向',
  'ql-size': '字体大小',
  'ql-color': '字体颜色',
  'ql-background': '背景颜色',
  'ql-font': '字体',
  'ql-align': '文本对齐',
  'ql-clean': '清除字体样式',
  'ql-code': '插入代码',
  'ql-link': '添加链接',
  'ql-image': '图片',
  'ql-video': '视频',
  'ql-formula': '公式',
}

const SizeStyle = Quill.import('attributors/style/size')
SizeStyle.whitelist = sizes
Quill.register(SizeStyle, true)
const Font = Quill.import("attributors/style/font");
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);

export default {
  name: "MoreTextEdt",
  props: {
    textText: {
      type: String,
    },
  },
  components: {
    quillEditor
  },
  data() {
    return {
      content: '',
      editorOption: {
        theme: 'snow', //'snow' or 'bubble'
        placeholder: '您想发布点什么？',
        modules: {
          toolbar: {
            container: toolbarOptions,
          }
        },
      }
    }
  },
  methods: {
    // 失去焦点事件
    onEditorBlur(quill) {
      // console.log('editor blur!', quill)
    },
    // 获得焦点事件
    onEditorFocus(quill) {
      // console.log('editor focus!', quill)
    },
    // 准备富文本编辑器
    onEditorReady(quill) {
      // console.log('editor ready!', quill)
    },
    // 内容改变事件
    onEditorChange({quill, html, text}) {
      // console.log('editor change!', quill, html, text)
      this.content = html
      this.$emit('update', this.content);
    },
    addQuillTitle() {
      const oToolBar = document.querySelector('.ql-toolbar'),
          aButton = oToolBar.querySelectorAll('button'),
          aSelect = oToolBar.querySelectorAll('select')
      aButton.forEach(function (item) {
        if (item.className === 'ql-script') {
          item.value === 'sub' ? item.title = '下标' : item.title = '上标'
        } else if (item.className === 'ql-indent') {
          item.value === '+1' ? item.title = '向右缩进' : item.title = '向左缩进'
        } else if (item.className === 'ql-header') {
          item.value === '1' ? item.title = '标题1' : item.title = '标题2'
        } else {
          item.title = titleConfig[item.classList[0]]
        }
      })
      aSelect.forEach(function (item) {
        item.parentNode.title = titleConfig[item.classList[0]]
      })
    }
  },
  mounted() {
    this.addQuillTitle()
  },
  created() {
    console.log(this.textText)
    this.content = this.textText
  }
}
</script>

<style lang="scss">
.ql-editor {
  padding: 0;
  margin: 0;
  width: 1200px;
  height: 600px;
  overflow-x: hidden;

  .ql-container {
    font-family: Helvetica, Arial, sans-serif !important;
    font-size: 20px; //默认字体大小
    width: 1200px;
    height: 505px;
  }

  .avatar-uploader-img {
    height: 0;
  }

  .avatar-uploader-video {
    height: 0;
  }

  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: '请输入链接地址:';
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    border-right: 0;
    content: '保存';
    padding-right: 0;
  }

  .ql-snow .ql-tooltip[data-mode=video]::before {
    content: '请输入视频地址:';
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item::before {
    content: '20px';
    font-size: 1em;
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before {
    content: '16px';
    font-size: .8em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='18px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='18px']::before {
    content: '18px';
    font-size: .9em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='22px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='22px']::before {
    content: '22px';
    font-size: 1.1em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
    content: '24px';
    font-size: 1.2em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='26px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='26px']::before {
    content: '26px';
    font-size: 1.3em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='28px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='28px']::before {
    content: '28px';
    font-size: 1.4em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='30px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='30px']::before {
    content: '30px';
    font-size: 1.5em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='32px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='32px']::before {
    content: '32px';
    font-size: 1.6em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='34px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='34px']::before {
    content: '34px';
    font-size: 1.7em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
    content: '36px';
    font-size: 1.8em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='38px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='38px']::before {
    content: '38px';
    font-size: 1.9em
  }

  .ql-snow .ql-picker.ql-size .ql-picker-label[data-value='40px']::before,
  .ql-snow .ql-picker.ql-size .ql-picker-item[data-value='40px']::before {
    content: '40px';
    font-size: 2em
  }

  .ql-editor .ql-size-16px {
    font-size: 16px;
  }

  .ql-editor .ql-size-18px {
    font-size: 18px;
  }

  .ql-editor .ql-size-22px {
    font-size: 22px;
  }

  .ql-editor .ql-size-24px {
    font-size: 24px;
  }

  .ql-editor .ql-size-26px {
    font-size: 26px;
  }

  .ql-editor .ql-size-28px {
    font-size: 28px;
  }

  .ql-editor .ql-size-30px {
    font-size: 30px;
  }

  .ql-editor .ql-size-32px {
    font-size: 32px;
  }

  .ql-editor .ql-size-34px {
    font-size: 34px;
  }

  .ql-editor .ql-size-36px {
    font-size: 36px;
  }

  .ql-editor .ql-size-38px {
    font-size: 38px;
  }

  .ql-editor .ql-size-40px {
    font-size: 40px;
  }

  .ql-snow .ql-editor h1 {
    font-size: 48px
  }

  .ql-snow .ql-editor h2 {
    font-size: 42px
  }

  .ql-snow .ql-editor h3 {
    font-size: 36px
  }

  .ql-snow .ql-editor h4 {
    font-size: 30px
  }

  .ql-snow .ql-editor h5 {
    font-size: 24px
  }

  .ql-snow .ql-editor h6 {
    font-size: 20px
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: "文本" !important;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
    content: "标题1" !important;
    font-size: 2em
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
    content: "标题2" !important;
    font-size: 1.8em
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: "标题3" !important;
    font-size: 1.6em
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: "标题4" !important;
    font-size: 1.4em
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5" !important;
    font-size: 1.2em
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6" !important;
    font-size: 1em
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: '标准字体';
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
    content: "黑体";
    font-family: "SimHei";
  }


  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
    content: "微软雅黑";
    font-family: "Microsoft YaHei";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
    content: "楷体";
    font-family: "KaiTi";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
    content: "仿宋";
    font-family: "FangSong";
  }


  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
    content: "Arial";
    font-family: "Arial";
  }

  .ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
  .ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
    content: "Times New Roman";
    font-family: "Times New Roman";
  }

  .ql-font-SimHei {
    font-family: "SimHei";
  }

  .ql-font-Microsoft-YaHei {
    font-family: "Microsoft YaHei";
  }

  .ql-font-KaiTi {
    font-family: "KaiTi";
  }

  .ql-font-FangSong {
    font-family: "FangSong";
  }

  .ql-font-Arial {
    font-family: "Arial";
  }

  .ql-font-Times-New-Roman {
    font-family: "Times New Roman";
  }

  .ql-snow .ql-picker.ql-font {
    width: 150px;
  }

  .ql-snow .ql-picker.ql-size {
    width: 100px;
  }

  .ql-toolbar.ql-snow {
    font-size: 20px;
    padding: 5px 0 5px 0;
  }
}
</style>